import React, { useEffect } from 'react';
import { useEchart } from 'hooklib';
import styles from './bar.css';
import cs from './common.css';

require('echarts/lib/chart/bar');
/**
 * todo
 * 1. 每个 bar 宽度
 * 2. 每个 bar 指定背景色
 * 3. x周2个数据项说明文字大小颜色
 * 4. y轴上部显示"单位(个)"
 * 5. 右上角显示“用户总数 10,1000个”
 */

const colors = ['#fdb400', '#d1d1d1'];

const theme = {
  backgroundColor: 'black',
  textStyle: {
    color: 'white',
  },
};

export default function Bar({ dayLeftNum = 84, expiredNum = 60 }) {
  const [refChart, onChartMount] = useEchart();

  useEffect(() => {
    refChart.current.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      ...theme,
      xAxis: {
        data: ['即将过期', '已过期'],
      },
      yAxis: {
        type: 'value',
        name: '单位(个)',
      },
      series: [
        {
          type: 'bar',
          name: 'passwordExpire',
          data: [
            {
              value: dayLeftNum,
              itemStyle: {
                normal: {
                  color: colors[0],
                },
              },
            },
            {
              value: expiredNum,
              itemStyle: {
                normal: {
                  color: colors[1],
                },
              },
            },
          ],
          barWidth: 30, // 控制每根柱子的宽度
          barMinWidth: 20,
          barMaxWit: 40,
          barMinHeight: 5, // 柱条最小高度，可用于防止某数据项的值过小而影响交互。
        },
      ],
    });
  }, [refChart, dayLeftNum, expiredNum]);

  return (
    <div className={styles.normal}>
      <h1>Page gauge 1234</h1>
      <div ref={onChartMount} className={cs.chart}></div>
    </div>
  );
}
